<template>
  <view>
    <!--border-x-0 border-t-0 border-b border-solid border-neutral-600-->
    <!--<view class="border-bottom h-16 bg-white flex items-center">-->
    <!--  <view class="w-28 pl-4 flex items-center box-border">手机号</view>-->
    <!--  <input type="text" placeholder="请输入手机号码" placeholder-class="plcg" v-model="psdSubPararms.phone">-->
    <!--</view>-->

    <view class="border-bottom h-16 pr-5 bg-white flex items-center">
      <view class="w-28 pl-4 flex items-center box-border">手机号码</view>
      <input class="flex-1 h-full px-4" placeholder="请输入手机号码" placeholder-class="plcg" v-model="psdParams.phone">

    </view>

    <view class="border-bottom h-16 pr-5 bg-white flex items-center">
      <view class="w-28 pl-4 flex items-center box-border">旧密码</view>
      <input :password="oldPsdShow" class="flex-1 h-full px-4" placeholder="请输入旧密码" placeholder-class="plcg" v-model="psdParams.password_old">

      <view class="w-10 h-full flex items-center justify-center" @click="oldPsdShow = !oldPsdShow">
        <image src="@/static/image/noeye.png" class="w-6 h-4" v-if="oldPsdShow"></image>
        <image src="@/static/image/eye.png" class="w-6 h-4" v-else></image>
      </view>
    </view>

    <view class="border-bottom h-16 pr-5 bg-white flex items-center">
      <view class="w-28 pl-4 flex items-center box-border">新密码</view>
      <input :password="newPsdShow" class="flex-1 h-full px-4" placeholder="请输入新密码" placeholder-class="plcg" v-model="psdParams.password">

      <view class="w-10 h-full flex items-center justify-center" @click="newPsdShow = !newPsdShow">
        <image src="@/static/image/noeye.png" class="w-6 h-4" v-if="newPsdShow"></image>
        <image src="@/static/image/eye.png" class="w-6 h-4" v-else></image>
      </view>
    </view>

    <!--<view class="h-16 pr-5 bg-white flex items-center">-->
    <!--  <view class="w-28 pl-4 flex items-center box-border">验证码</view>-->
    <!--  <input class="w-28" type="text" placeholder="请输入验证码" placeholder-class="plcg" v-model="psdSubPararms.phoneCode">-->
    <!--  <view class="text-blue-500 text-right w-max ml-auto">-->
    <!--    <text @click="getCode" v-if="codeSet.isCodeClick">获取验证码</text>-->
    <!--    <text v-else>{{ codeSet.countdown }}后重新获取</text>-->
    <!--  </view>-->
    <!--</view>-->

    <!--@click="handleLogin"-->
    <view class="w-80 m-auto mt-9 h-12 flex items-center justify-center text-center rounded-3xl bg-indigo-500 text-white" @click="handleSub"  v-if="isTjClick">
      提 交
    </view>
    <view class="w-80 m-auto mt-9 h-12 flex items-center justify-center text-center rounded-3xl bg-indigo-200 text-white" v-else>
      提 交
    </view>
  </view>
</template>

<script setup lang="ts">
  import { ref, reactive, computed } from 'vue'
  import { throttle } from '@/api/common'
  import { uiwu } from '@/api/interface/interface'
  import { editPsdApi } from '@/api/account/index'
  import type { editPsdParamsItf, forgotPsdParamsItf } from '@/api/account/type'
  import { onLoad } from '@dcloudio/uni-app'

  const isToken = ref<boolean>(false)
  onLoad(() => {
    // uni.getStorageSync('token')
    isToken.value = uni.getStorageSync('token') ? true : false
  })

  const oldPsdShow = ref<boolean>(true) // 旧密码
  const newPsdShow = ref<boolean>(true) // 新密码

  const psdParams = ref<editPsdParamsItf>({
    phone: '',
    password_old: '',
    password: ''
  })


  const psdSubPararms:forgotPsdParamsItf = reactive({
    phone: '',
    imgCode: '',
    phoneCode: ''
  })

  const codeSet = reactive({
    isCodeClick: true,
    countdown: 10,
    codeTimer: 0, // 定时器
  })

  /** 获取验证码 **/
  const getCode = throttle(() => {
    if(!psdSubPararms.phone.trim()) {
      uiwu.toast('请先输入手机号码')
      return;
    }
    // console.log('10s后 重新获取')
    codeSet.isCodeClick = false

    codeSet.codeTimer = setInterval(() => {
      codeSet.countdown--

      if(!codeSet.countdown) {
        // console.log(codeSet.codeTimer)
        console.log('倒计时结束')
        codeSet.isCodeClick = true
        codeSet.countdown = 10
        clearInterval(codeSet.codeTimer)
      }

    },1000)
    // if(codeSet.countdown == 0) {
    //
    // }

  },3000)

  /** 提交按钮 **/
  const handleSub = throttle(async () => {
    // console.log('提交成功')
    const res = await editPsdApi(psdParams.value)
    if(res.status != 200) {
      uiwu.toast(res.msg)
    }else {
      uiwu.toast('修改成功')
    }

    if(isToken.value) {
      setTimeout(() => {
        uni.navigateBack()
      }, 3000)
    }else {
      setTimeout(() => {
        uni.redirectTo({ url: '/pages/account/login' })
      },2000)
    }

    // uni.reLaunch({ url: '/pages/account/login' })
  },3000)


  const isTjClick = computed(() => {
    if( psdParams.value.phone && psdParams.value.password_old && psdParams.value.password ) return true
  })


</script>

<style scoped lang="scss">
page {
  background: #f5f5f5;
}

.plcg {
  color: #ccc;
}
</style>
